<template>
    <div style="margin-left: 25px;margin-right: 25px;margin-top: 25px">
        <h4>基本监控设备信息</h4>
        <!-- 筛选条件这一栏 -->
        <el-row>
            <el-col :span="6">
                <label>当前展示的设备为：</label>
                <el-select v-model="currentHost" placeholder="请选择">
                    <el-option
                            v-for="item in hosts"
                            :key="item.hostid"
                            :label="item.host"
                            :value="item.hostid">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="1">
                <el-button type="primary" icon="el-icon-search" @click="getBasicItem()">搜索</el-button>
            </el-col>
        </el-row>
        <!-- 展示具体的图表信息 -->
        <el-row>
            <el-col :span="8"><div class="showChart grid-content bg-purple" id="cpu_load">CPU负载率</div></el-col>
            <el-col :span="8"><div class="showChart grid-content bg-purple-light" id="cpu_usage">CPU使用率</div></el-col>
            <el-col :span="8"><div class="showChart grid-content bg-purple" id="disk_capacity">磁盘容量</div></el-col>
            <el-col :span="8"><div class="showChart grid-content bg-purple" id="number_of_processes">进程数量</div></el-col>
            <el-col :span="8"><div class="showChart grid-content bg-purple" id="net_collisions">网络冲突数量</div></el-col>
            <el-col :span="8"><div class="showChart grid-content bg-purple" id="interrupts">设备中断数量</div></el-col>
            <el-col :span="24"><div class="showChart grid-content bg-purple" id="traffic_statistics">网络接口流量上传统计</div></el-col>
        </el-row>
    </div>
</template>

<script>
    // import axios from "axios";

import axios from "axios";

    export default {
    name: "BasicMonitoringEquipment",
    data() {
      return {
        hosts:[],//当前在线主机
        currentHost: '10488', // 当前选择的主机
      }
    },
    mounted() {
        this.getHostList();//获取当前在线主机列表
        // this.drawClock();  // 绘制钟表
        this.getBasicItem(); // 页面初始化时绘制图表
    },
    watch:{
    },
    methods: {
      //获取在线主机
      getHostList() {
        const _this=this;
        axios({
          method: 'get',
          url: '/demo/get_all_online_host.action'
        }).then(function (response){
          let resultList = response.data.content.result
          _this.hosts= resultList
        }).catch(function (error){
          console.log(error)
        })
      },
      //发送数据请求
      getBasicItem() {
          // this.loadAllCPULoadData(); // 绘制CPU负载
          this.drawChart("cpu_load","Load average (1m avg)","CPU负载"); // 绘制CPU负载
          this.drawChart("cpu_usage","CPU utilization","CPU使用率"); // 绘制CPU使用率
          this.drawChart("disk_capacity","Free swap space in %","磁盘容量"); // 绘制磁盘容量
          this.drawChart("traffic_statistics","Interface eth0: Bits sent","网络接口流量上传统计"); // 绘制网络接口流量上传统计
          this.drawChart("number_of_processes","Number of processes","进程数量"); // 绘制进程数量
          this.drawChart("net_collisions","net.if.collisions","网络冲突数"); // 绘制进程数量
          this.drawChart("interrupts","Interrupts per second","设备中断数"); // 绘制设备中断数
      },
      /**
       * 封装函数，根据传进来的参数，传值给后台，然后渲染数据绘制表格
       */
      drawChart(chartId,itemName,chartName){
          const _this = this;
          axios({
              methods: 'get',
              url: '/basical/agentItem.action',
              params: {
                  hostId: _this.currentHost, // hostId
                  itemName: itemName // 参数名
              }
          }).then((res) => {
              var result = res.data.content.result;

              // 基于准备好的dom，初始化echarts实例
              let myChart = this.$echarts.init(document.getElementById(chartId));

              var cpuLoadData = [];
              var now = +new Date();
              var oneDay = 1000;
              // var oneDay = 24 * 3600 * 1000;
              var value;

              for (var i = 0; i < result.length; i++) {
                  now = new Date(+now + oneDay);
                  value = result[i].value;
                  var time = result[i].clock;

                  var tempData = {
                      name: now.toString(),
                      value: [
                          time,
                          Math.round(value)
                      ]
                  };
                  cpuLoadData.push(tempData);
              }

              var cpuLoadDataLength = result.length-1;

              // 指定图表的配置项和数据
              let option = {
                  title: {
                      text: chartName
                  },
                  tooltip: {
                      trigger: 'axis',
                      // 规定参数的格式
                      formatter: function (params) {
                          params = params[0];
                          var date = new Date(params.name);
                          return date.getDate() + '-' + (date.getMonth() + 1) + '-' + date.getFullYear() + ' : ' + params.value[1];
                      },
                      axisPointer: {
                          animation: false
                      }
                  },
                  //工具栏，内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
                  toolbox: {
                      show: true,
                      //toolbox的配置项
                      feature: {
                          //辅助线的开关
                          mark: { show: true },
                          //数据视图
                          dataView: {
                              show: true,
                              readOnly: true
                          },
                          //动态类型切换
                          magicType: {
                              show: true,
                              //line为折线图，bar为柱状图
                              type: ['line', 'bar']
                          },
                          //配置项还原
                          restore: { show: true },
                          //将图标保存为图片
                          saveAsImage: { show: true }
                      }
                  },
                  xAxis: {
                      type: 'time',
                      triggerEvent: true
                  },
                  yAxis: {
                      type: 'value',
                      boundaryGap: [0, '100%'],
                  },
                  series: [{
                      name: '数据记录',
                      type: 'line',
                      smooth: true,
                      data: cpuLoadData
                  }]
              };

              // 使用刚指定的配置项和数据显示图表。
              // Echarts清除上次加载的数据只需要在setoptions中设置第二个参数为true即可。默认为false，即融合所有加载数据
              myChart.clear();
              myChart.setOption(option,true);
          })
      }
    }
}
</script>

<style scoped>
.monitors{
    width: 100%;
    height: 400px;
}
.showChart{
    height: 400px;
    margin: 8px;
    /*background-color: #d3e0f3;*/
}
.nowEcharts { width: 100%; height: 300px; margin-bottom: 0.3rem;}
</style>